import { RegularExpression } from '@/common/constVariable';
import { Button, Col, Form, Input, Row, Select } from 'antd';
import { useContext } from 'react';
import { IShortcutActionEnum } from '../common';
import { GlobalShortcutContext } from '../mconfig';
import { CheckCircleOutlined } from '@ant-design/icons';
import { GlobalShortcutKeyAPI } from '../common/type';

export const ShortcutMailForm: React.FC<
  GlobalShortcutKeyAPI.IShortcutMailForm
> = () => {
  const [mailForm] = Form.useForm();
  const { shortcutDispatch, prefixCls, mailOrPhoneSuccess } = useContext(
    GlobalShortcutContext,
  );

  let smsTemp = [
    {
      name: '模板一',
      id: 'sms1',
    },
    {
      name: '模板二',
      id: 'sms2',
    },
    {
      name: '模板三',
      id: 'sms3',
    },
  ];

  /**
   * 发送短信
   */
  const sendOutMail = () => {
    mailForm?.validateFields()?.then((values: any) => {
      shortcutDispatch({
        type: IShortcutActionEnum.MAILPHONE_SUCCESSKEY,
        payload: 'MailSuccess',
      });
    });
  };

  return (
    <div
      style={{
        padding: '10px',
        width: '100%',
        height: '100%',
      }}
    >
      {mailOrPhoneSuccess == 'MailSuccess' ? (
        <>
          <Row className={prefixCls + 'mailSuccessStyle'}>
            <Col span={24} className={prefixCls + 'mailSuccessStyle-iconCol'}>
              <CheckCircleOutlined />
            </Col>
            <Col
              span={24}
              className={prefixCls + 'mailSuccessStyle-successTextCol'}
            >
              短信发送成功
            </Col>
            <Col span={24}>
              <Button
                type="primary"
                style={{
                  width: '60%',
                  marginTop: 10,
                }}
                onClick={() => {
                  shortcutDispatch({
                    type: IShortcutActionEnum.MAILPHONE_SUCCESSKEY,
                    payload: '',
                  });
                }}
              >
                返回
              </Button>
            </Col>
          </Row>
        </>
      ) : (
        <Row style={{ padding: '5px 10px' }}>
          <Col span={24}>
            <Form form={mailForm} layout="vertical">
              <Row>
                <Col span={24}>
                  <Form.Item
                    label={'手机号'}
                    name="phoneMobile"
                    rules={[
                      {
                        required: true,
                        message: '请输入手机号',
                      },
                      {
                        pattern: RegularExpression?.phone,
                        message: '手机号格式错误！',
                      },
                    ]}
                  >
                    <Input placeholder="请输入手机号" allowClear />
                  </Form.Item>
                </Col>
                <Col span={24}>
                  <Form.Item label="短信模板" name="mailTemp">
                    <Select placeholder="请选择短信模板">
                      {smsTemp?.map((item: any) => {
                        return (
                          <Select.Option value={item?.id} key={item?.id}>
                            {item?.name}
                          </Select.Option>
                        );
                      })}
                    </Select>
                  </Form.Item>
                </Col>

                <Col span={24}>
                  <Form.Item
                    label={'短信内容'}
                    name="smsText"
                    rules={[
                      {
                        required: true,
                        message: '请输入短信内容',
                      },
                    ]}
                  >
                    <Input.TextArea
                      placeholder="请输入短信内容"
                      allowClear
                      showCount
                      maxLength={200}
                      autoSize={{ minRows: 2, maxRows: 4 }}
                    />
                  </Form.Item>
                </Col>
              </Row>
            </Form>
          </Col>
          <Col span={24}>
            <Button
              type="primary"
              style={{
                width: '100%',
                marginTop: 10,
              }}
              onClick={sendOutMail}
            >
              发送
            </Button>
          </Col>
        </Row>
      )}
    </div>
  );
};
